<template>
  <el-dialog :title="`${type==2?'编辑':'新建'}银行类别`" :visible.sync="dialogFormVisible">
    <el-form :model="form" label-width="120px" label-position="right">
      <el-row :gutter="10">
       <el-col :span="24">
         <el-form-item label="组织名称" prop="parentId">
           <treeselect style="width: 96%" v-model="form.parentId" :options="deptOptions" :normalizer="normalizer"
                       placeholder="请选择组织" />
         </el-form-item>
       </el-col>
      </el-row>

      <el-row :gutter="10">
       <el-col :span="12">
         <el-form-item label="NC编码">
           <el-input style="width: 90%" v-model="form.name" placeholder="选择组织后自动带出" disabled></el-input>
         </el-form-item>
       </el-col>
        <el-col :span="12">
          <el-form-item label="NCid">
            <el-input style="width: 90%" v-model="form.name" placeholder="选择组织后自动带出" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行类别id">
            <el-input style="width: 90%" v-model="form.name" placeholder="请输入银行类别id" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行类别编码">
            <el-input style="width: 90%" v-model="form.name" placeholder="请输入银行类别编码" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行类型名称">
            <el-input style="width: 90%" v-model="form.name" placeholder="请输入银行类型名称" maxlength="30"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="助记码">
            <el-input style="width: 90%" v-model="form.name" placeholder="请输入助记码" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人行行别编码">
            <el-input style="width: 90%" v-model="form.name" placeholder="请输入人行行别编码" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listDept} from "@/api/system/dept";
export default {
  components: {Treeselect},
  dicts:['nc_purchasesale_type'],
  props: {},
  data() {
    return {
      dialogFormVisible:false,
      type:1,
      deptOptions:[],
      form:{
        name:null,
        parentId:null,
        type:null,
        status:1
      }
    }
  },
  computed: {},
  methods: {
    show(type){
      this.type=type;
      this.dialogFormVisible=true
    },
    getDeptList(){
      listDept().then(response => {
        this.deptOptions = this.handleTree(response.data, "deptId");
      });
    },
    /** 转换组织数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    saveForm(){
      this.dialogFormVisible=false
    }
  },
  mounted() {
    this.getDeptList()
  },

}
</script>

<style lang="scss" scoped>
</style>
